<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="6" :sm="8">
            <a-form-item label="公司名称" :maxLength="50">
              <a-input
                placeholder="请输入公司名称"
                v-model="queryParam.companyName"
              ></a-input>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="资质状态" :maxLength="50">
              <a-select
                :size="'default'"
                style="min-width: 100px"
                :showArrow="true"
                v-model="queryParam.qualificationStatus"
                placeholder="请选择资质状态"
              >
                <a-select-option
                  v-for="item in this.$sysDictOptions('qualificationStatus')"
                  :key="item.k"
                  :value="item.k"
                >
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="8">
            <a-form-item label="供应商类型" :maxLength="50">
              <a-select
                :size="'default'"
                style="min-width: 100px"
                :showArrow="true"
                v-model="queryParam.supplierType"
                placeholder="请选择供应商类型"
              >
                <a-select-option
                  v-for="item in this.$sysDictOptions('supplier_type')"
                  :key="item.k"
                  :value="item.k"
                >
                  {{ item.v }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="添加人" :maxLength="50">
              <a-select
                :size="'default'"
                style="min-width: 100px"
                :showArrow="true"
                v-model="queryParam.createBy"
                placeholder="请选择添加人"
              >
                <a-select-option
                  v-for="item in createByList"
                  :key="item.companyId"
                  :value="item.companyId"
                >
                  {{ item.companyName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
                icon="search"
                >查询</a-button
              >
              <a-button
                @click="
                  () => {
                    this.$objToReset(queryParam), $refs.table.refresh(true)
                  }
                "
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
      <div class="table-operator">
        <a-button
          @click="$refs.modalEdit.add()"
          type="primary"
          icon="plus"
          v-wx-role="80401"
          >添加</a-button
        >
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item>
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete()"
                v-wx-role="80404"
              >
                <a><a-icon type="delete" />删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"
            >批量操作<a-icon type="down"
          /></a-button>
        </a-dropdown>
      </div>
      <s-table
        ref="table"
        rowKey="id"
        size="middle"
        :scroll="{ x: 1500 }"
        :columns="columns"
        :alert="options.alert"
        :row-selection="options.rowSelection"
        :data="loadData"
      >
        <template slot="companyName" slot-scope="text, record">
          <a @click="handleEdit(record)">{{
            text == null || text == '' ? '--' : text
          }}</a>
        </template>
        <template slot="unifiedCode" slot-scope="text, record">
          {{ text == null || text == '' ? '--' : text }}
        </template>
        <template slot="fixedTelePhone" slot-scope="text, record">
          {{ text == null || text == '' ? '--' : text }}
        </template>
        <template slot="address" slot-scope="text, record">
          {{ text == null || text == '' ? '--' : text }}
        </template>
        <template slot="createBy" slot-scope="text, record">
          {{ text == null || text == '' ? '' : getCreateByName(text) }}
        </template>
        <template slot="updateTime" slot-scope="text, record">
          {{ text == null || text == '' ? '--' : text }}
        </template>

        <template slot="supplierType" slot-scope="text, record">
          {{ getSupplierTypeName(text) }}
        </template>
        <template slot="action" slot-scope="text, record">
          <!--  -->
          <a-divider type="vertical" />
          <a @click="handelView(record)" v-wx-role="80404"
            ><a-icon /> 协同链接</a
          >
          <a-divider type="vertical" />
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
            v-wx-role="80403"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </s-table>

      <dev-supplier-edit ref="modalEdit" @ok="modalEditOk"></dev-supplier-edit>
      <dev-supplier-view ref="modalView"></dev-supplier-view>
    </div>
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { deleteAction, postAction, getAction } from '@/api/manage'
import { mixin } from '@/utils/mixin'
import devSupplierEdit from './DevSupplierEdit'
import devSupplierView from './DevSupplierView'
import { getCompanyList } from '@/api/api'
export default {
  name: 'devSupplierList',
  mixins: [mixin],
  components: { STable, Ellipsis, devSupplierEdit, devSupplierView },
  data() {
    return {
      visible: false,
      // 查询条件
      queryParam: {
        companyName: undefined,
        qualificationStatus: undefined,
        supplierType: undefined,
        createBy: undefined,
      },
      // 表头
      // 如果需要字典，那么需要在columns列中加入 customRender: (text) => this.$sysDictFilter(text, 'xxxx')xxxx 为dataIndex
      columns: [
        {
          title: '公司名称',
          dataIndex: 'companyName',
          scopedSlots: { customRender: 'companyName' },
        },
        // {
        //   title: '资质状态',
        //   dataIndex: 'qualificationStatus',
        //   customRender: (text) =>
        //     this.$sysDictFilter(text, 'qualificationStatus'),
        // },
        {
          title: '供应商类型',
          dataIndex: 'supplierType',
          scopedSlots: { customRender: 'supplierType' },
        },
        {
          title: '税号/社会信用代码',
          dataIndex: 'unifiedCode',
          scopedSlots: { customRender: 'unifiedCode' },
        },
        {
          title: '固定电话',
          dataIndex: 'fixedTelephone',
          scopedSlots: { customRender: 'fixedTelephone' },
        },
        {
          title: '公司地址',
          dataIndex: 'address',
          scopedSlots: { customRender: 'address' },
        },
        {
          title: '添加人',
          dataIndex: 'createBy',
          scopedSlots: { customRender: 'createBy' },
        },
        {
          title: '资质更新时间',
          dataIndex: 'updateTime',
          scopedSlots: { customRender: 'updateTime' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        console.log('loadData.parameter', parameter)
        return postAction(
          this.url.list,
          Object.assign(parameter, this.queryParam)
        ).then((res) => {
          var result = res.result
          return result
        })
      },

      selectedRowKeys: [],
      options: {
        alert: {
          clear: () => {
            this.selectedRowKeys = []
          },
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
          type: 'checkbox',
        },
      },
      url: {
        list: '/system/devSupplier/list',
        delete: '/system/devSupplier/delete',
      },
      createByList: [],
    }
  },
  computed: {},
  created() {
    this.getUserList()
  },
  methods: {
    getCreateByName(text) {
      var obj = this.createByList.filter((aa) => aa.companyId == text)[0]
      if (obj == null) {
        return '--'
      }
      return obj.companyName
    },
    getSupplierTypeName(text) {
      console.log('text', text)
      if (text) {
        var supplierTypes = ''
        var supplierTypeList = text.split(',')
        supplierTypeList.forEach((supplierType) => {
          supplierTypes =
            supplierTypes +
            this.$sysDictFilter(supplierType, 'supplier_type') +
            ','
        })
        if (supplierTypes) {
          return supplierTypes.substring(0, supplierTypes.length - 1)
        }
      }
      return '--'
    },

    getUserList() {
      // 加载数据方法 必须为 Promise 对象
      var parameter = { pageNo: 1, pageSize: 1000000 }
      getCompanyList(Object.assign(parameter, this.queryParam)).then((res) => {
        this.createByList = res.result.data.records
      })
    },

    // 删除
    handleDelete(record) {
      if (!record) {
        // 如果没有传入，那么批量删除
        record = this.selectedRowKeys.join(',')
      }
      deleteAction(this.url.delete, { ids: record }).then((resp) => {
        this.$message.success('删除成功!')
        this.$refs.table.refresh(true)
      })
    },
    // 用户编辑
    handleEdit(record) {
      this.$refs.modalEdit.edit(record)
    },
    searchQuery() {
      this.$refs.table.refresh(true)
    },
    // 保存刷新
    modalEditOk() {
      this.$refs.table.refresh()
    },
    // 查看
    handelView(record) {
      this.$refs.modalView.show(record)
    },
    //开启选择
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
  watch: {},
}
</script>
<style scoped></style>
